<script lang="ts">
export default {
  name: 'OnClickOutsideDemo',
}
</script>
<script lang="ts" setup>
import OnClickOutside from '@/components/OnClickOutside/OnClickOutside.vue'
import OnClickInside from '@/components/OnClickOutside/OnClickInside.vue'
import { ref } from 'vue'

const visible = ref(true)

function close() {
  visible.value = false
}

function onShow(e: Event) {
  e.stopPropagation()
  visible.value = true
}
</script>
<template>
  <OnClickOutside @outside="close">
    <button @click="onShow">show</button>
    <OnClickInside v-show="visible">
      <div class="OnClickOutsideDemo_box"> </div>
    </OnClickInside>
  </OnClickOutside>
</template>

<style lang="scss">
.OnClickOutsideDemo_box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  background-color: #ddd;
}
</style>
